<template>
    <div>
      <div class="form-wrapper" v-if="userInfo.personal_auth_info">
        <div class="form-table">
          <h1>个人认证信息</h1>
          <el-form :label-position="'left'" label-width="120px" >
            <el-form-item label="姓名" >
              <div>{{userInfo.personal_auth_info.realname}}</div>
            </el-form-item>
            <el-form-item label="性别" >
              <div v-show="userInfo.personal_auth_info.sex==0">保密</div>
              <div v-show="userInfo.personal_auth_info.sex==1">男</div>
              <div v-show="userInfo.personal_auth_info.sex==2">女</div>
            </el-form-item>
            <el-form-item label="身份证号" >
              <div>{{userInfo.personal_auth_info.id_card}}</div>
            </el-form-item>
            <el-form-item label="在职证明" >
              <div>
                <el-image
                  style="width: 200px; height: 200px"
                  :fit="'contain'"
                  :src="userInfo.personal_auth_info.work_img_url"
                  :preview-src-list="[userInfo.personal_auth_info.work_img_url]">
                </el-image>
              </div>
            </el-form-item>
            <el-form-item label="手机" >
              <div>{{userInfo.phone}}</div>
            </el-form-item>
            <el-form-item label="会员单位用户" >
              <div>
                <el-tag type="success" v-if="userInfo.is_member_unit==1">是</el-tag>
                <el-tag type="info" v-if="userInfo.is_member_unit==0">否</el-tag>
              </div>
            </el-form-item>
            <el-form-item label="VIP" >
              <div>
                <el-tag type="success" v-if="userInfo.is_vip==1">是</el-tag>
                <el-tag type="info" v-if="userInfo.is_vip==0">否</el-tag>
              </div>
            </el-form-item>
            <el-form-item label="认证时间" >
              <div>{{userInfo.personal_auth_info.created_at}}</div>
            </el-form-item>
          </el-form>
        </div>

      </div>
        <div class="form-wrapper">
           <div class="form-table">
             <h1>单位认证信息</h1>
         <el-form :label-position="'left'" label-width="150px" v-if="userInfo.unit_info">
           <el-form-item label="单位名称" >
                <div>{{userInfo.unit_info.name}}</div>
            </el-form-item>
            <el-form-item label="统一社会信用代码" >
                <div>{{userInfo.unit_info.uniform_social_credit_code}}</div>
            </el-form-item>
            <el-form-item label="单位详细地址" >
                <div>{{userInfo.unit_info.province}}{{userInfo.unit_info.city}}{{userInfo.unit_info.area}}{{userInfo.unit_info.address}}</div>
            </el-form-item>
            <el-form-item label="营业执照" >
                <div>
                    <el-image 
                        style="width: 400px; height: 300px"
                        :fit="'contain'"
                        :src="userInfo.unit_info.license_img_url" 
                        :preview-src-list="[userInfo.unit_info.license_img_url]">
                    </el-image>
                </div>
            </el-form-item>
            <el-form-item label="认证时间" >
                <div>{{userInfo.unit_info.created_at}}</div>
            </el-form-item>
            <el-form-item label="是否为会员单位" >
                <div>
                    <el-tag type="success" v-if="userInfo.unit_info.is_member_unit==1">是</el-tag>
                    <el-tag type="info" v-if="userInfo.unit_info.is_member_unit==0">否</el-tag>
                </div>
            </el-form-item>
           
            
          </el-form>
          <div v-else>暂无单位信息</div>
           </div>

        </div>
    </div>
</template>
<script>
  export default {
    data(){
        return{
            userInfo:{},
            id:'',
            tableData:''
        }
    },
    methods:{
        async getUserDetail(){
            let res=await this.$api.getUserDetail({id:this.id});
            if(res.data.level=='success'){
                this.userInfo=res.data.data
            }else{
                this.$message.error(res.data.message)
            }
        },
    },
    mounted() {
        this.id=this.$route.query.id;
        this.getUserDetail()
    },
  };
</script>
<style lang="scss" scoped>
    .form-wrapper{
       display: flex;
       justify-content: center;
       width:100%;
       flex-wrap: wrap;
       .form-table{
           margin:20px;
           display: flex;
            justify-content: center;
            flex-wrap: wrap;
            width: 80%;
            border: 1px solid #eee;
            box-shadow: #eee 5px 5px 20px;
            padding:20px;
            h1{
                width: 100%;
                font-size: 24px;
                color:red;
            }
       }
    }
</style>
